<template>
  <div class="twoxm-mall">
    <div class="twoxm-mall-tab">
      <ul>
        <router-link
          tag="li"
          v-for="tab in tabs"
          :key="tab.id"
          :to="`/mall/${tab.id}`"
        >
          <img :src="tab.imageUrl" alt="">
          <span>{{tab.name}}</span>
        </router-link>
      </ul>
    </div>
    <div class="twoxm-mall-list">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'mall',
  data () {
    return {
      tabs: []
    }
  },
  created () {
    this.$http.getTabs()
      .then(resp => {
        this.tabs = resp.list.slice(1)
        if (!this.$route.params.cateId) {
          const cateId = sessionStorage.getItem('cateId') || this.tabs[0].id
          this.$router.push(`/mall/${cateId}`)
        }
      })
  }
}
</script>

<style lang="scss">
  .twoxm-mall {
  display: flex;
  height: 100%;
  &-tab {
    overflow-x: hidden;
    width: 80px;
    li {
      border: {
        top: 1px solid transparent;
        bottom: 1px solid transparent;
        right: 1px solid #ccc;
      }
      line-height: 30px;
      display: flex;
      align-items: center;
      &.router-link-exact-active,
      &.router-link-active {
        color: #26a2ff;
        border: {
          top: 1px solid #ccc;
          bottom: 1px solid #ccc;
          right: 1px solid transparent;
        }
      }
    }
    img {
      width: 25px;
    }
  }
  &-list {
    flex: 1;
    overflow-x: hidden;
  }
}
</style>
